<!--设置模块-->
<template>
<div>
<el-card>
  <div>
    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin-left: 2%"></el-avatar>
    <el-divider content-position="left"><i class="el-icon-mobile-phone"></i></el-divider>
  </div>
  <div>
    <el-form ref="editPassword" :model="editPassword" :rules="editPasswordRule" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="原密码" prop="password">
            <el-input v-model="editPassword.password" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新密码" prop="password1">
            <el-input type=password v-model="editPassword.password1" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="确认密码" prop="password2">
            <el-input type=password v-model="editPassword.password2" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="success" @click="onSave">修 改</el-button>
      </el-form-item>
    </el-form>
  </div>
</el-card>
</div>
</template>

<script>
export default {
  name: "dormitory",
  data(){
    return{
      editPassword:{
        password:'',//原密码
        password1:'',//新密码
        password2:''//确认新密码
      },
      editPasswordRule:{
              password: [
                { required: true, message: '请输入密码', trigger: 'blur'},
              ],
              password1: [
                { required: true, message: '请输入密码', trigger: 'blur' },
              ],
              password2: [
                { required: true, message: '请输入密码', trigger: 'blur' },
              ]
          },
    }
  },
  methods:{

    //修改密码
    onSave(){
      this.$refs.editPassword.validate(async valid => {
        //如果验证不成功直接返回 false
        if (!valid) return false
        //把用户名和密码传入进去进行验证
        if(this.editPassword.password1 == this.editPassword.password2){
          const{data: res} = await this.$http.post('/user/changePassword', this.editPassword)
          console.log(res)
          if(res.code == 200) {
            this.$message.success(res.message)
          } else if(res.code == 400) {
            this.$message.error(res.message)
          }
        } else {
          this.$message.error('两次输入的密码不相同！')
        }
      })
    }
  }

}
</script>

<style scoped>

</style>